<template>
	<view class="page-wraper bkg">
		<customNav style="padding-bottom: 40px; padding-top: 20px;" title1="我的报表" bgColor="#3957BF" :backIcon="true" backIconColor="white"></customNav>
		<!-- <addressSearch @addressBtn='addressBtn' @searchBtn='searchBtn'></addressSearch> -->
		<view class="contentViewBox">
			<cssArcBackground bgColor="#3957BF" height="30" />
			<view class="simple_card" style="padding-top: 30px; padding-left:14px">
				<view>
					<view class="simple_title" style="background-image: url('static/bac-small.png');" >
						近七天数据统计
					</view>
				</view>
				<view style="height: 80px; flex-direction: row; display: flex;">
					<view class="simple_item">
						<view class="simple_content">
							<view class="simple_icon"></view>
							<view style="margin-left: 5px; text-align: center;">
								<view class="simple_field">车源点击量</view>
								<view class="simple_value">12</view>
							</view>
						</view>
			
					</view>
				<view class="simple_item">
					<view class="simple_content">
						<view class="simple_icon"></view>
						<view style="margin-left: 5px; text-align: center;">
							<view class="simple_field">车源电话量</view>
							<view class="simple_value">12</view>
						</view>
					</view>	
				</view>
				</view>
				<view style="height: 80px; flex-direction: row; display: flex;">
					<view class="simple_item">
						<view class="simple_content">
							<view class="simple_icon"></view>
							<view style="margin-left: 5px; text-align: center;">
								<view class="simple_field">主页访问量</view>
								<view class="simple_value">12</view>
							</view>
						</view>
							
					</view>
					<view class="simple_item">
						<view class="simple_content">
							<view class="simple_icon"></view>
							<view style="margin-left: 5px; text-align: center;">
								<view class="simple_field">在售车源条数</view>
								<view class="simple_value">12</view>
							</view>
						</view>	
					</view>
				</view>
				
				<view style="height: 80px; flex-direction: row; display: flex;">
					<view class="simple_item">
						<view class="simple_content">
							<view class="simple_icon"></view>
							<view style="margin-left: 5px; text-align: center;">
								<view class="simple_field">上次刷新时间</view>
								<view class="simple_value">12</view>
							</view>
						</view>
							
					</view>
					<view class="simple_item">
						<view class="simple_content">
							<view class="simple_icon"></view>
							<view style="margin-left: 5px; text-align: center;">
								<view class="simple_field">近七天刷新次数</view>
								<view class="simple_value">12</view>
							</view>
						</view>	
					</view>
				</view>
				
				<view style="height: 14px"></view>
			</view>
			<view class="detail_card">
				<view class="detail_title_view">
					<image src="../../../static/report_title_bkg.png" mode="" style="width: 190px; height: 36px;"></image>
					<image src="../../../static/report_title_icon.png" mode="" style="margin-left: 9px; margin-top: 10px;height: 18px; width: 18px; position: absolute; left: 14px;" >
						<text class="detail_title_text" style="position: absolute; margin-top: 18px; left:47px">
							近七天数据详情
						</text>
						
						<view style="flex-direction: row;display: flex;">
							<view class="btn_selected" type="default">近七天</view>
							<view class="btn_normal" type="default">近三十天</view>
						</view>
						
						<view style="margin: 14px 10px 0px 10px;">
							<view style="flex-direction: row; display: flex;">
								<view class="center title_view">日期</view>
								<view class="center title_view">车源点击</view>
								<view class="center title_view">车源电话</view>
								<view class="center title_view">主页访问</view>
							</view>
							
							
							<view v-for="item in list" style="flex-direction: row; display: flex;">
								<view class="center list_item">04-15</view>
								<view class="center list_item">23</view>
								<view class="center list_item">23</view>
								<view class="center list_item">23</view>
							</view>
						</view>

					</image>
					
				</view>
			</view>
		</view>
	
	</view>
</template>

<script>
	import customNav from "@/components/custom-nav/custom-nav.vue";
	import cssArcBackground from "@/components/cssArcBackground/cssArcBackground.vue";
	import addressSearch from "@/components/addressSearch/addressSearch.vue";
	export default {
		components: {
			customNav,
			addressSearch,
			cssArcBackground
		},
		data() {
			return {
				list: [
					{"date": "04-15", "click": "23", "num": "23", "call": "23"},
					{"date": "04-15", "click": "23", "num": "23", "call": "23"},
					{"date": "04-15", "click": "23", "num": "23", "call": "23"},
					{"date": "04-15", "click": "23", "num": "23", "call": "23"}
				]
				
			}
		},
		onLoad() {

		},
		methods: {
			
		}
	}
</script>

<style>
	
	/* 详情 */
	
	.list_item {
		height: 30px;
		flex: 1;
		margin: 2px;
		font-size: 12px;
		font-family: PingFang SC;
		font-weight: 500;
		color: #000126;
	}
	
	.title_view {
		height: 30px;
		background: #F6F6F6;
		border-radius: 0px;
		flex: 1;
		margin: 2px;

		font-size: 12px;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
	}
	
	.detail_title_text {
		font-size: 14px;
		font-weight: 500;
		line-height: 0px;
		color: #000126;
		opacity: 1;
	}
	
	.btn_selected {
		margin-top: 10px;
		margin-left: 10px;
		width: 80px;
		height: 30px;
		background: #EDF1FF;
		opacity: 1;
		border-radius: 15px;
		font-size: 12px;
		font-family: PingFang SC;
		font-weight: 500;
		color: #0E59EA;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.btn_normal {
		margin-top: 10px;
		margin-left: 10px;
		width: 80px;
		height: 30px;
		border: 1px solid rgba(0, 0, 0, 0.33);
		opacity: 1;
		border-radius: 15px;
		font-size: 12px;
		font-family: PingFang SC;
		font-weight: 500;
		color: #000126;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	/* 概况 */
	
	.simple_content {
		display: flex;
		flex-direction: row;
		margin-top: auto;
		margin-bottom: auto;
		/* width: 100px; */
		margin-left: 14px;
	}
	
	.simple_value {
		font-size: 28px;
		font-weight: bold;
		color: #000026;
		opacity: 1;
	}
	
	.simple_field {
		font-size: 12px;
		font-weight: 500;
		color: #999999;
		opacity: 1;
	}
	
	.simple_icon {
		width: 25px;
		height: 25px;
		background: #F2F2F2;
		opacity: 1;
		border-radius: 4px;
	}
	
	.simple_item {
		flex: 1;
		display: flex;
	}
	
	.simple_title_view {
		/* padding-top: 30px; */
		/* padding-left: 14px; */
	}
	
	.simple_title {
		font-size: 16px;
		font-family: Alimama ShuHeiTi;
		font-weight: bold;
		color: #000026;
		opacity: 1;
		width: 134px;
		height: 24px;
	}
	
	.simple_title_bkg {
		/* width: 134px; */
		/* height: 24px; */
		/* background: radial-gradient(circle, #0E59EA 0%, #0E59EA 19%, rgba(255,255,255,0) 100%); */
		width: 300px;
		height: 300px;
		background-color: red;
		border-radius: 50%;
		opacity: 0.43;
	}
	
	.simple_card {
		margin: -100px 14px 0px 14px;
		height: auto;
		background: white;
		border-radius: 7px;
	}
	
	.detail_card {
		margin: 10px 14px 0px 14px;
		height: auto;
		background: white;
		border-radius: 7px;
	}
	
	.bkg {
		position: absolute;
		top: 0px;
		width: 100%;
		height: 100%;
		background-color: #F2F2F2;
	}
	
	.center {
		display: flex;
		justify-content: center;
		align-items: center;
	}

</style>